<?php
$active_page = "image.php";
?>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/semantic.css" />
<link rel="stylesheet" type="text/css" href="css/dropzoneSarun.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/semantic.js"></script>
<script src="js/dropzone.js"></script>
<script type="text/javascript">
$(function(){
/*--------------
     Dropzone upload
---------------*/		
	Dropzone.options.uploadZone = {
		dictInvalidFileType:'อัพโหลดรูปได้เท่านั้น',
		acceptedFiles:'image/*',
		maxFilesize:'4',
		previewsContainer:'#add',
		thumbnailWidth:'200',
		thumbnailHeight:'200',
		autoProcessQueue: false,// remove auto upload
		init: function() {
			var submitButton = document.querySelector("#submit")
			uploadZone = this; // closure
			submitButton.addEventListener("click", function() {
				$('.dz-progress').show();
				uploadZone.processQueue(); // Tell Dropzone to process all queued files.
			});	
			this
			.on("addedfile", function(file) {
				 var leftPos = $('#add').scrollLeft();
				//$('#add').scrollLeft(leftPos);

				var _this = this;
				$('.coupled.modal').modal({
					allowMultiple: true
				});
				$('.second.modal').modal('attach events', '.first.modal i.close').modal({onApprove:function(){
					_this.removeAllFiles(true);
					$('.coupled.modal').modal();
					$('#upload-modal').modal('hide');
				}});

				$('#submit').removeClass('disabled');
				$('#upload-zone').parent().before(file.previewElement);
				var removeButton = Dropzone.createElement("<i class='remove icon delete-upload' title='ลบ'></i>");
				file.previewElement.appendChild(removeButton);
				var editButton = Dropzone.createElement('<div class="ui dropdown edit-upload"><i class="pencil icon" title="เพิ่มข้อมูล"></i><div class="menu"> <div class="item">เพิ่มน้ำหนัก</div> <div class="item">เพิ่มสถานที่</div> <div class="item">เพิ่มวัน</div> </div></div>');
				file.previewElement.appendChild(editButton);
				var inputForm = Dropzone.createElement('<div class="ui form"><div class="field"><textarea placeholder="ข้อความเกี่ยวกับรูปนี้" style="max-height:6em;min-height:6em;"></textarea></div></div>');
				file.previewElement.appendChild(inputForm);

				$('.ui.edit-upload').dropdown();
				
				removeButton.addEventListener("click", function(e) {
					e.preventDefault();// Make sure the button click doesn't submit the form:
					e.stopPropagation();
					
					_this.removeFile(file);// Remove the file preview.

					// If you want to the delete the file on the server as well,
					// you can do the AJAX request here.
				});				
			})
			.on("sending", function(file, xhr, formData){
				var textarea = file.previewElement.childNodes[13].childNodes[0].childNodes[0].value;
				formData.append('textarea', textarea);
			})
			.on("error" ,function(file, errorMessage, xhr){
				if(xhr.status===403){// if http status code from server is 403
					this.processQueue();
				}
			})
			.on("success", function(file, responseText){
				this.removeFile(file);// Remove successful file
				this.processQueue();
			})
			.on("removedfile", function(){
				if(uploadZone.getQueuedFiles().length===0){// if no files left
					$('#submit').addClass('disabled');
					$('.coupled.modal').modal();
				}
			})
		}
	};

/*--------------
     Dropdown
---------------*/		
	$('.ui.dropdown').dropdown();/*Initialize Dropdown*/

/*--------------
     Dropdown & Modal
---------------*/


	$('.upload-button').click(function(){/*Show upload photo modal*/
		$('#upload-modal').modal('setting',"closable",false).modal('show');
	});

	$('.ui.gallery').dropdown({/*Show dropdown when click edit button*/
		onChange: function(val,text,item){
			item.removeClass('active selected');/*Remove Active state when select Dropdown*/
			var imageHtml = item.closest('.gallery').siblings('img')[0].outerHTML;
			if(val==="delete"){
				$('#delete').find('.ui.image').html(imageHtml);/*Display image in Modal content*/
				$('#delete').modal('show');
			}else if(val==="edit"){
				$('#edit').find('.ui.image').html(imageHtml);/*Display image in Modal content*/
				$('#edit').modal('show');
			}
		}
	});

	$('.ui.gallery.image')/*Show edit button when hover*/
		.mouseenter(function(){
			var button = $(this).find('.ui.gallery.button');
			button.stop().fadeIn(100);
		})
		.mouseleave(function(){
			var button = $(this).find('.ui.gallery.button');
			button.stop().dropdown('hide').fadeOut(100);
		});
});
</script>
<style type="text/css">
/*--------------
     Container
---------------*/
.container{
	width:71.43rem;
	margin:auto;
	padding:0 0.714rem;
}

/*--------------
     Button (Add new "Gallery" Class)
---------------*/	
.ui.gallery.button{
	min-width: 0;/*Remove button min width*/
	position:absolute;/*Position at top right of Images*/
	top:0.6rem;right:0.6rem;
	margin:0;/*remove right margin*/
	display: none;
}
.ui.gallery.button > i{
	margin:0;
	opacity: 1;
}

/*--------------
     Grid (Add new "Compact" Class to compact space between Grid)
---------------*/	
.ui.compact.grid{
	margin:-0.6rem;/*Default -1rem*/
}
.ui.compact.grid > .column:not(.row), .ui.compact.grid > .row > .column {
    display: inline-block;
    font-size: 1rem;
    padding:0.4rem;
    position: relative;
    vertical-align: top;
}
.ui.compact.grid > * {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/*--------------
     Select
---------------*/
.ui.form select {
	padding:0.4em;
}

/*--------------
     Photo upload
---------------*/
#add{
	height:100%;
	overflow-y:auto;
}
</style>
</head>
<body>
<!--************
Top menu
*************-->
<?php
include("top-menu.php");
?>

<!--************
Content
*************-->
<div class="container">
<?php
include("profile-cover.php");
?>
	<div class="ui grid">
		<div class="sixteen wide column">			
			<div class="ui two column grid">
				<div class="column">
					<div class="ui grid">
						<div class="centered ten wide column">
							<!-- Before Card -->
							<h5 class="ui header horizontal divider">Before</h5>
							<div class="ui card">
								<div class="dimmable">
									<div class="ui dimmer">
										<div class="content">
											<div class="center">
												<a href="image2.php" class="ui primary inverted button"><i class="camera icon"></i> ดูรูป</a>
												<div class="ui inverted button"><i class="camera icon"></i> เปลี่ยนรูป</div>
											</div>
										</div>
									</div>
									<img class="ui medium image" src="images/t.jpg">
								</div>
								<div class="content">
									<p class="header">10 กันยายน 2555</p>
								</div>
							</div>								
						</div>
					</div>
				</div>
				<!-- Divider -->
				<div class="ui vertical divider">
					<i class="arrow circle right icon" style="font-size:2rem;margin:-0.9rem;"></i>
				</div>						
				<div class="column">
					<div class="ui grid">
						<div class="centered ten wide column">
							<!-- After Card -->
							<h5 class="ui header horizontal divider">After</h5>
							<div class="ui card">
								<div class="dimmable">
									<div class="ui dimmer">
										<div class="content">
											<div class="center">
												<a href="image2.php" class="ui primary inverted button"><i class="camera icon"></i> ดูรูป</a>
												<div class="ui inverted button"><i class="camera icon"></i> เปลี่ยนรูป</div>
											</div>
										</div>
									</div>
									<img class="ui medium image" src="images/t.jpg">
								</div>
								<div class="content">
									<p class="header">21 มกราคม 2557</p>
								</div>
							</div>							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="column">
				<!-- All Images segment -->
				<div class="ui top attached secondary segment">
					<div class="ui two column grid">
						<div class="column">
							<h4 class="ui header">รูปทั้งหมด</h4>
						</div>
						<div class="right aligned column">
							<div class="ui button upload-button"><i class="icon plus"></i>เพิ่มรูป</div>							
						</div>
					</div>
				</div>			
				<div class="ui attached segment">
					<div class="ui four column compact grid"><!-- User defined "compact" class -->
						<div class="column">																
							<a href="#" class="ui gallery image">
								<div class="ui gallery green left top floating pointing dropdown button"><!-- User defined "gallery" class -->
									<i class="wrench icon"></i>
									<div class="menu">
										<div class="item">ตั้งเป็นโปรไฟล์</div>
										<div class="item">ตั้งเป็น Before</div>
										<div class="item">ตั้งเป็น After</div>		
										<div class="ui divider"></div>															
										<div class="item" data-value="edit"><i class="pencil icon"></i> แก้ไข</div>
										<div class="item" data-value="delete"><i class="trash icon"></i>ลบ</div>
									</div>								
								</div>
								<img src="images/wireframe/image.png">
							</a>			
						</div>
						<div class="column">																
							<a href="#" class="ui gallery image">
								<div class="ui gallery green left top floating pointing dropdown button"><!-- User defined "gallery" class -->
									<i class="wrench icon"></i>
									<div class="menu">
										<div class="item">ตั้งเป็นโปรไฟล์</div>
										<div class="item">ตั้งเป็น Before</div>
										<div class="item">ตั้งเป็น After</div>		
										<div class="ui divider"></div>															
										<div class="item" data-value="edit"><i class="pencil icon"></i> แก้ไข</div>
										<div class="item" data-value="delete"><i class="trash icon"></i>ลบ</div>
									</div>								
								</div>
								<img src="images/wireframe/image.png">
							</a>			
						</div>
						<div class="column">																
							<a href="#" class="ui gallery image">
								<div class="ui gallery green left top floating pointing dropdown button"><!-- User defined "gallery" class -->
									<i class="wrench icon"></i>
									<div class="menu">
										<div class="item">ตั้งเป็นโปรไฟล์</div>
										<div class="item">ตั้งเป็น Before</div>
										<div class="item">ตั้งเป็น After</div>		
										<div class="ui divider"></div>															
										<div class="item" data-value="edit"><i class="pencil icon"></i> แก้ไข</div>
										<div class="item" data-value="delete"><i class="trash icon"></i>ลบ</div>
									</div>								
								</div>
								<img src="images/wireframe/image.png">
							</a>			
						</div>
						<div class="column">																
							<a href="#" class="ui gallery image">
								<div class="ui gallery green left top floating pointing dropdown button"><!-- User defined "gallery" class -->
									<i class="wrench icon"></i>
									<div class="menu">
										<div class="item">ตั้งเป็นโปรไฟล์</div>
										<div class="item">ตั้งเป็น Before</div>
										<div class="item">ตั้งเป็น After</div>		
										<div class="ui divider"></div>															
										<div class="item" data-value="edit"><i class="pencil icon"></i> แก้ไข</div>
										<div class="item" data-value="delete"><i class="trash icon"></i>ลบ</div>
									</div>								
								</div>
								<img src="images/wireframe/image.png">
							</a>			
						</div>						
					</div>
				</div>
			</div>		
		</div>
	</div>
</div>

<!--************
Modal
*************-->
<div id="upload-modal" class="ui fullscreen first coupled modal" style="min-height:95%!important;">
	<i class="close icon" style="right:0.7rem;top:0.7rem;"></i>
	<div style="background-color:#efefef;border-bottom: 1px solid rgba(39,41,43,.15);padding:1rem;font-size:1.5rem;">อัพโหลดรูป</div>
	<div style="position:absolute;top:4.071428rem;left:0;bottom:0;width:23rem;border-right: 1px solid rgba(39,41,43,.15);background-color:#efefef;padding:2rem;">
		<div class="ui form">
			<div class="field">	
				<textarea placeholder="ข้อความที่จะแสดงในฟีด" style="min-height:8em;max-height:8em;"></textarea>
			</div>
			<div class="field">
				<input type="text" placeholder="น้ำหนัก (กิโลกรัม)">
			</div>
			<div class="field">
				<input type="text" placeholder="สถานที่">
			</div>			
			<button id="submit" class="ui disabled primary button">อัพโหลด</button>		
		</div>	
	</div>
	<div style="position:absolute;padding:1em 0 1em 1em;left:23.071428rem;top:4.071428rem;right:0;bottom:0;">
		<div id="add">
			<div style="display:inline-block;margin:1em;">
				<form action="upload-handler.php" class="dropzone" id="upload-zone">
					<div class="dz-default dz-message">
						<i class="plus icon" style="cursor:pointer;"></i>
						<p style="cursor:pointer;">ใส่รูป</p>
					</div>
				</form>					
			</div>			
		</div>
	</div>				
</div>

<div id="cancel-upload" class="ui small second coupled modal">
	<div class="header">ยกเลิกอัพโหลด</div>
	<div class="content">
		คุณยังมีรูปที่ยังไม่ได้อัพโหลด ต้องการยกเลิกหรือไม่
	</div>
	<div class="actions">
		<div class="ui deny button">ไม่ใช่</div>
		<div class="ui primary approve button">ใช่</div>
	</div>
</div>

<div id="delete" class="ui small modal">
	<i class="close icon"></i>
	<div class="header">โปรดยืนยันเพื่อลบรูป</div>
	<div class="content">
		<div class="ui image"></div>	
		<div class="description">คุณต้องการลบรูปนี้?</div>
	</div>
	<div class="actions">
		<div class="ui button">ยกเลิก</div>
		<div class="ui primary button">ลบ</div>
	</div>
</div>

<div id="edit" class="ui small modal">
	<i class="close icon"></i>
	<div class="header">แก้ไขรูป</div>
	<div class="content">
		<div class="ui image"></div>
		<div class="description">
			<div class="ui small form">
				<div class="field">
					<div class="ui labeled input">
						<div class="ui label">น้ำหนัก</div>
						<input type="text" placeholder="กิโลกรัม">
					</div>
				</div>	
				<div class="field">
					<textarea placeholder="ใส่คำบรรยาย"></textarea>
				</div>
				<div class="field">
					<div class="three fields">
						<div class="five wide field">
							<select>
								<option>2558</option>
							</select>							
						</div>
						<div class="seven wide field">
							<select>
								<option>กุมภาพันธ์</option>
							</select>							
						</div>
						<div class="four wide field">
							<select>
								<option>15</option>
							</select>							
						</div>
					</div>
				</div>				
			</div>	
		</div>
	</div>
	<div class="actions">
		<div class="ui button">ยกเลิก</div>
		<div class="ui primary button">แก้ไข</div>
	</div>
</div>
</body>
</html>